<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>电子产品分类</title>
    <link rel="stylesheet" href="./css/layui.css" />
    <script src="./layui.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/electronics.css" />
    <link rel="stylesheet" href="./css/carousel.css" />
    <link rel="stylesheet" href="./css/bottom.css">
    <script src="./js/carousel.js"></script>
  </head>

  <body>
    <!-- header -->
    <div id="header">
      <a href="./index.html"><img id="barIcon" src="./img/bar/barIcon.jpg" alt="barIcon" /></a>
      <div id="barRight">
        <a href="./login.html"><img id="account" src="./img/bar/account.jpg" alt="account" /></a>
        <img id="love" src="./img/bar/love.jpg" alt="love" />
        <a href="./shoppingCar.html"><img id="car" src="./img/bar/car.jpg" alt="car" /></a>
      </div>
    </div>

    <!-- 轮播 -->
    <div class="layui-carousel" id="carousel">
      <div carousel-item>
        <div><img src="./img/pov/pov1.jpg" /></div>
        <div><img src="./img/pov/pov2.jpg" /></div>
        <div><img src="./img/pov/pov3.jpg" /></div>
        <div><img src="./img/pov/pov4.jpg" /></div>
      </div>
    </div>

    <!-- wrap -->
    <div id="wrap">
      <!-- body -->
      <div id="body">
        <!-- Electronics -->
        <div id="Electronics">
          <h4>Electronics</h4>
        </div>
        <!-- navigation-bar -->
        <div id="navigation-bar">
          <ul id="ul">
            <li class="li01">
              <a href="#">Shop by Category</a>
              <ul>
                <li class="li02"><a href="#">&emsp;&emsp;&emsp;TV & Video&emsp;&emsp;&emsp;</a></li>
                <li class="li02"><a href="#">&emsp;&emsp;&emsp;Computers&emsp;&emsp;&emsp;</a></li>
                <li class="li02"><a href="#">&emsp;&emsp;&emsp;Video Games&emsp;&emsp;&emsp;</a></li>
                <li class="li02"><a href="#">&emsp;&emsp;&emsp;Cell Phones&emsp;&emsp;&emsp;</a></li>
                <li class="li02"><a href="#">&emsp;&emsp;&emsp;iPad & Tablets&emsp;&emsp;&emsp;</a></li>
                <li class="li02"><a href="#">&emsp;&emsp;&emsp;Laptops</a></li>
                <br />
                <br />
              </ul>
            </li>
            <li class="li01">
              <a href="#">Special Offers</a>
              <p class="left-nav" style="margin-top: auto">&emsp;&emsp;&emsp;Pick Up Today</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Rollbacks</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Clearance</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Refurbished</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Value Bundles</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Special Buys</p>
              <br />
            </li>
            <li class="li01">
              <a href="#">Shopping tools</a>
              <p class="left-nav" style="margin-top: auto">&emsp;&emsp;&emsp;Learn about 4K HDTVs</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Electronics trade-in program</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Product Care Plans</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Tech Buying Guides & Tips</p>
              <br />
            </li>
            <li class="li01" id="li01-4">
              <a href="#">Popular in Electronics</a>
              <p class="left-nav" style="margin-top: auto">&emsp;&emsp;&emsp;LED Gifts</p>
              <p class="left-nav">&emsp;&emsp;&emsp;LED TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Plasma TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;120HZ TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;1080 TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Chromecast TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;240 Hertz TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;42" LED TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Home Electronics</p>
              <p class="left-nav">&emsp;&emsp;&emsp;Electronics: Smart TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;24" TV</p>
              <p class="left-nav">&emsp;&emsp;&emsp;32" LCD Class TV</p>
              <br />
            </li>
          </ul>
        </div>
        <!-- Shop-by-category -->
        <div id="Shop-by-category">
          <div class="h2">
            <h2>Shop-by-category</h2>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture01.jpg" />
              <h4 class="h4">TVs & video</h4>
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture02.jpg" />
              <h4 class="h4">Laptops</h4>
            </a>
          </div>
          <div class="content">
            <a href="./tablets.html">
              <img src="./img/picture03.jpg" />
              <h4 class="h4">iPads & tablets</h4>
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture04.jpg" />
              <h4 class="h4">Cell phones</h4>
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture05.jpg" />
              <h4 class="h4">Printer</h4>
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture06.jpg" />
              <h4 class="h4">Streaming</h4>
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture07.jpg" />
              <h4 class="h4">Headphones</h4>
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/picture10.jpg" />
              <h4 class="h4">Wearable technology</h4>
            </a>
          </div>
        </div>
        <!-- Shop-TVs-by-size -->
        <div id="Shop-TVs-by-size">
          <div class="h2">
            <h2>Shop-TVs-by-size</h2>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/75.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/70.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/65.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/60.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/55.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/50.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/43.jpg" />
            </a>
          </div>
          <div class="content">
            <a href="#">
              <img src="./img/40.jpg" />
            </a>
          </div>
        </div>
        <!-- Save-big-on-top-tech -->
        <div id="Save-big-on-top-tech">
          <div class="h2">
            <h2>Save-big-on-top-tech</h2>
          </div>
          <div class="ul">
            <ul class="ul01">
              <li class="li03"><a href="#">Tvs /</a></li>
              <li class="li02"><a href="#">Computers /</a></li>
              <li class="li02"><a href="#">Cell phones /</a></li>
              <li class="li02"><a href="#">Headphones /</a></li>
            </ul>
          </div>
          <div class="content01">
            <span class="span">Reduces Price</span>
            <div class="tv">
              <img src="./img/picture19.jpg" />
            </div>
            <span>Hisense 40" Class FHD (1080P) Roku Smart LED TV (40H4030F1)</span>
            <span><del>$228.00</del></span>
            <br />
            <span>$178.00</span>
            <div class="span01"><a class="span02" href="#">Add to cart</a></div>
          </div>
          <div class="content01">
            <span class="span">Sony</span>
            <div class="tv">
              <img src="./img/picture20.jpg" />
            </div>
            <span>ony 75" Class KD75X750H 4K UHD LED Android Smart TV HDR</span>
            <span><del>$1,299.99</del></span>
            <br />
            <span>$1299.99</span>
            <div class="span01"><a class="span02" href="#">Add to cart</a></div>
          </div>
          <div class="content01">
            <span class="span">TCL</span>
            <div class="tv">
              <img src="./img/picture21.jpg" />
            </div>
            <span>TCL 32" Class 3-Series 720P HD LED Roku Smart TV 32S335</span>
            <span><del>$199.99</del></span>
            <br />
            <span>$118.00</span>
            <div class="span01"><a class="span02" href="#">Add to cart</a></div>
          </div>
          <div class="content01">
            <span class="span">onn</span>
            <div class="tv">
              <img src="./img/picture26.jpg" />
            </div>
            <span>onn. 65" Class 4K (2160p) UHD LED Roku Smart TV HDR</span>
            <span><del>$45/mo</del></span>
            <br />
            <span>$478.00</span>
            <div class="span01"><a class="span02" href="#">Add to cart</a></div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <hr>
      <div class="b">
        <span class="bh">Walmart Services</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Walmart+</a></li>
          <li class="b-text"><a href="#">Grocery Pickup & Delivery</a></li>
          <li class="b-text"><a href="#">MoneyCenter</a></li>
          <li class="b-text"><a href="#">Walmart Credit Card</a></li>
          <li class="b-text"><a href="#">Walmart Pay</a></li>
          <li class="b-text"><a href="#">Weekly Ad</a></li>
          <li class="b-text"><a href="#">Other Services</a></li>
        </ul>
      </div>
      <div class="b">
        <span class="bh">Get to Know Us</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Our Company</a></li>
          <li class="b-text"><a href="#">Store Directory</a></li>
          <li class="b-text"><a href="#">Digital Museum</a></li>
          <li class="b-text"><a href="#">Our Suppliers</a></li>
          <li class="b-text"><a href="#">Sell on Walmart.com</a></li>
          <li class="b-text"><a href="#">Advertise With Us</a></li>
          <li class="b-text"><a href="#">Careers</a></li>
        </ul>
      </div>
      <div class="b">
        <span class="bh">Walmart.com</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Walmart Labs</a></li>
          <li class="b-text"><a href="#">Our Ads</a></li>
          <li class="b-text"><a href="#">Terms of Use</a></li>
          <li class="b-text"><a href="#">Privacy & Security</a></li>
          <li class="b-text"><a href="#">CA Privacy Rights</a></li>
          <li class="b-text"><a href="#">Do Not Sell My Personal Information</a></li>
          <li class="b-text"><a href="#">Request My Personal Information</a></li>
          <li class="b-text"><a href="#">Tax Exempt Program</a></li>
          <li class="b-text"><a href="#">California Supply Chain Security Act</a></li>
        </ul>
      </div>

      <div class="b">
        <span class="bh">Customer Service</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Help Center</a></li>
          <li class="b-text"><a href="#">Returns</a></li>
          <li class="b-text"><a href="#">Product Recalls</a></li>
          <li class="b-text"><a href="#">Accessibility</a></li>
          <li class="b-text"><a href="#">Contact Us</a></li>
          <li class="b-text"><a href="#">Store Pickup</a></li>
        </ul>
      </div>

      <div class="b">
        <span class="bh">In The Spotlight</span>
        <ul>
          <br />
          <li class="b-text"><a href="#">Portable Air Conditioners</a></li>
          <li class="b-text"><a href="#">PS4</a></li>
          <li class="b-text"><a href="#">Trampoline</a></li>
          <li class="b-text"><a href="#">Skateboard</a></li>
          <li class="b-text"><a href="#">Outdoor Furniture</a></li>
          <li class="b-text"><a href="#">Nintendo Switch Lite</a></li>
        </ul>
      </div>
      <hr />
      <div id="copy">
        <small class="copy" style="float: left;">© 2021 Walmart. All Rights Reserved.</small>
        <small class="copy" style="float: right;">To ensure we are able to help you as best we can, please include your reference number: ZICHWEIG9F</small>
      </div>
    </div>
  </body>
</html>
